<template>
  <div class="case">
    <na-table
      :datas.sync="tableData"
      :searchObj.sync="search"
      @updateDatas="getDataList"
    >
    </na-table>
    <!-- 成品明细 -->
    <el-dialog
      v-dialogDrag
      :title="typeName"
      :visible.sync="isVisible"
      :close-on-click-modal="false"
      height="16vh"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
    >
      <div class="dialogDody p16">
        <!-- 搜索     -->
        <div
          class="btnCon mb10"
          style="
            border: 1px solid #eee;
            border-top: 3px solid #3f61f1;
            height: 75px;
          "
        >
          <div class="flex" style="color: #999aaa">
            <div class="flex1">
              成品编号：<span style="color: #606200">{{
                rowData.productSpecificationNumber
              }}</span>
            </div>
            <div class="flex1">
              产品名称：<span style="color: #606200">{{
                rowData.productName
              }}</span>
            </div>
            <div class="flex1">
              规格型号：<span style="color: #606200">{{
                rowData.productSpecificationName
              }}</span>
            </div>
          </div>
          <div class="flex mt10" style="color: #999aaa">
            <div class="flex1">
              客户名称：<span style="color: #606200">{{
                rowData.customerName
              }}</span>
            </div>
            <div class="flex1">
              版面：<span style="color: #606200">{{
                rowData.productLayout
              }}</span>
            </div>
            <div class="flex1">
              版本：<span style="color: #606200">{{
                rowData.productVersion
              }}</span>
            </div>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon not lastTdNoBorder" v-if="typeName === '库存明细'">
          <el-table
            v-loading="infoLoading"
            :data="finishedInfoList"
            max-height="460"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="cartonName"
              label="纸箱规格"
              min-width="170"
            />
            <el-table-column
              prop="eachBoxQuantity"
              label="每箱包数"
              show-overflow-tooltip
              width="180"
            />
            <el-table-column prop="warehouseInfo" label="仓库库位" />
            <el-table-column
              prop="stockBoxCount"
              label="库位箱数"
              width="130"
              show-overflow-tooltip
            />
            <el-table-column
              prop="stockQuantity"
              label="库位数量"
              width="130"
              show-overflow-tooltip
            />
          </el-table>
          <!--    分页-->
          <div class="paginaCon">
            <pagination
              :total="finishedTotal"
              :page.sync="infoSearch.pageIndex"
              :limit.sync="infoSearch.pageSize"
              @pagination="getInfoList"
            />
          </div>
        </div>

        <div class="tableCon not lastTdNoBorder" v-if="typeName === '变更日志'">
          <el-table
            v-loading="infoLoading"
            :data="finishedInfoList"
            max-height="460"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="createTime"
              label="变更时间"
              min-width="130"
            />
            <el-table-column
              prop="craetor"
              label="变更人员"
              show-overflow-tooltip
              width="100"
            />
            <el-table-column prop="changeType" label="变更状态" />
            <el-table-column prop="associationCode" label="关联单号" />
            <el-table-column prop="cartonSizeName" label="纸箱规格" />
            <el-table-column prop="wareHouseInfo" label="仓库库位" />
            <el-table-column prop="changeQuantiy" label="变更数量">
              <template scope="{row}">
                <div>
                  <span v-if="row.changeType.indexOf('入库')>-1" style="color:#55a532">+{{row.changeQuantity }}</span>
                  <span v-else style="color:#e13335">-{{row.changeQuantity}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="afterChangeQuantity" label="变更后库位数量" />
            <el-table-column prop="remark" label="备注" />
          </el-table>
          <div class="paginaCon">
            <pagination
              :total="finishedTotal"
              :page.sync="infoSearch.pageIndex"
              :limit.sync="infoSearch.pageSize"
              @pagination="getInfoList"
            />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  <script>
import treeTransfer from "el-tree-transfer";
import { arraySort } from "@/utils";
import naTable from "@/components/naTable";
import Pagination from "@/components/Pagination";
import MixA from "@/utils/mixin";
const mixa = new MixA();
export default {
  name: "MaterialQuery",
  components: {
    treeTransfer,
    Pagination,
    naTable,
  },
  mixins: [mixa],
  data() {
    return {
      infoLoading: false,
      isVisible: false, // 库存明细弹框显示隐藏
      searchLoading: false,
      search: {
        pageIndex: 1,
        pageSize: 30,
        queryDataBaseFiled: "",
        likeWords: "",
        isShowDisabled: 0,
        productNo: "",
      }, // 成品库存搜索条件
      total: 0,
      finishedInfoList: [], // 库存明细列表
      finishedTotal: 0,

      infoSearch: {
        pageIndex: 1,
        pageSize: 30,
        queryDataBaseFiled: "",
        likeWords: "",
        isShowDisabled: 0,
        productNo: "",
      },

      rowData: "",
      typeName:'',
      tableData: {
        headId: "head", //表头列显隐组件所需ID-避免多个页面id重复问题
        tableId: "stockGoodsID", //表格列表key,也就是一条数据的唯一标识
        senior: false, //高级搜索是否显示
        disableWord: "", //是否禁用显示的字段
        disableStatus: "", //判断未禁用的状态值
        addTitle: "", //新建按钮名称-为''则不显示，为undefine则为新建
        addPermission: "", //新建按钮权限
        addIcon: "queryIcon", //新建按钮icon
        voidWord: "", //需要查询作废的字段
        statusList: [], //状态筛选条件列表
        statusWord: "", //状态筛选的字段
        refresh: true, //刷新按钮
        //表格按钮
        operationBtn: [
          {
            title: "库存明细", //按钮名称
            methodsName: "handleEdit", //按钮绑定方法的字段
            // permission: "MenuCode5-1-4-1", //按钮权限
          },
          {
            title: "变更日志", //按钮名称
            methodsName: "handleChangeJournal", //按钮绑定方法的字段
            // permission: "MenuCode5-1-4-1", //按钮权限
          },
        ],
        //表格内容
        tbody: [],
        //表格表头
        thead: [],
      },
    };
  },
  created() {
    // 成品查询 动态表头
    this.getTableHead();
    // 库存明细列表
    // this.getInfoList();
  },
  mounted() {},
  methods: {
    // 库存明细列表
    getInfoList() {
      this.infoLoading = true;
      if (this.typeName == "库存明细") {
        this.$api.warehouse
          .GetFinishedProductStockDetailPageList(this.infoSearch)
          .then((res) => {
            this.finishedInfoList = res.list;
            this.finishedTotal = res.totalCount;
            this.infoLoading = false;
          })
          .catch(() => {
            this.infoLoading = false;
          });
      }else{
        this.$api.warehouse
          .GetPageProductStockChangeLogList(this.infoSearch)
          .then((res) => {
            this.finishedInfoList = res.list;
            this.finishedTotal = res.totalCount;
            this.infoLoading = false;
          })
          .catch(() => {
            this.infoLoading = false;
          });
      }
    },

    // 成品查询 动态表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.selectProductStockList,
      };
      this.$api.common.getAllTableHead(parmas).then((res) => {
        res.sort(arraySort("columnSort"));
        this.tableData.thead = res;
        // 半成品出库列表
        this.getDataList();
      });
    },
    // 成品列表
    getDataList() {
      const params = this.search;
      this.searchLoading = true;
      this.$api.warehouse
        .GetFinishedProductStockPageList(params)
        .then((res) => {
          res.list.forEach((item) => {
            if (!item.updateUser) {
              item.updateUser = item.createUser;
            }
            if (!item.updateTime) {
              item.updateTime = item.createTime;
            }
          });
          this.tableData.tbody = res.list;
          this.search.total = res.totalCount;
          this.searchLoading = false;
        })
        .catch(() => {
          this.searchLoading = false;
        });
    },

    //库存明细
    handleEdit(row) {
      this.typeName = "库存明细";
      this.rowData = row;
      this.infoSearch.productNo = row.productNo;
      this.getInfoList();
      this.isVisible = true;
    },

    //变更日志
    handleChangeJournal(row) {
      this.typeName = "变更日志";
      this.rowData = row;
      this.infoSearch.productNo = row.productNo;
      this.getInfoList();
      this.isVisible = true;
    },
  },
};
</script>
  <style lang="scss" scoped>
.see {
  cursor: pointer;
  color: #409eff;
}

::v-deep .el-dialog {
  height: 76% !important;
}
</style>
  